<template>
    <page-view class="bg-[#0f1b52]">
        <el-card header="分类信息汇总">
            <ul class="title-bar bg-[#0f1b52]">
                <li>
                    <div>总用户数</div>
                    <div>370.00</div>
                </li>
                <li>
                    <div>总订单数</div>
                    <div>463.00</div>
                </li>
                <li>
                    <div>总商品数</div>
                    <div>29.00</div>
                </li>
                <li>
                    <div>总金额数</div>
                    <div>84492.80</div>
                </li>
            </ul>
        </el-card>
        <el-card header="请展示图形图形的数据">
            <div id="main" class="w-full height-[400px]"></div>
        </el-card>
    </page-view>
</template>
  
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from "vue";
const main = ref();
onMounted(() => {
    init();
})
const init = () => {
    let myChart = echarts.init(main, 'dark');
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };

    option && myChart.setOption(option);
</script>
  
<style scoped lang="scss">
.title-bar {
    @apply border flex flex-row justify-around h-[100px] text-[#ffeb7b] font-bold;

    li {
        @apply h-full flex flex-col justify-around items-center
    }
}
</style>